<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册	</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="logo-warp">
			<div class="logo w980">
				<h1>
					<a href="">bangou</a>
				</h1>
			</div>
		</div>
		<div id="main-warp">
			<div class="maintitle w980">
				<a href="">手机注册</a>
			</div>
			<div class="mainform w980">
				<div class="main-left">
					<div class="main-lefttitle">
						第一步：填写手机账户信息（以下内容均为必填）
					</div>
					<div class="success">
						<div class="success-title">
							恭喜您注册成功！
						</div>
						<div class="success-content">
							您登录邦购的用户名为：
							<span class="success-name">huanwen</span>
							，您随时可使用此用户名享受便宜又放心的购物乐趣。
						</div>
						<a href="login.html" class="success-btn"></a>
						<div class="success-hr">
							
						</div>
						<div class="user-checked">
							<h5>请完成帐户安全验证</h5>
							<p>验证手机和邮箱可保护您的账户安全，帮助您快速找回密码，并可接收订单处理等信息。</p>
							<div class="success-yz">
								<a href="" class="success-email">立刻去验证邮箱>></a>
								<a href="" class="success-phone">立刻去验证手机>></a>
							</div>
						</div>
					</div>
					<form action="" method="post" id="register-form">
						
						<div class="main-itme main-frist">
							<div class="user-title">
								用户名：
							</div>
							<div class="input-title">
								<input type="text" name="user" id="user" value="" class="input1" />
							<span class="tips">
								4-20个字符，一个汉字为两个字符，推荐使用中文会会员名字。一旦注册成功会员名将不能修改。
							</span>
							</br>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
					<div class="main-itme">
							<div class="user-title">
								手机号码：
							</div>
							<div class="input-title">
								<input type="text" name="phoneCode" id="phoneCode" value="" class="input1" />
							<span class="tips">
								请输入您的手机号码。
							</span><br>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
					<!--/*额外的输入框*登陆密码/-->
						<div class="main-itme hide">
							<div class="user-title">
								登录密码：
							</div>
							<div class="input-title">
								<input type="password" name="pwd" id="pwd" value="" class="input1" />
							<span class="tips">
								6-16个字符，请使用字母加数字或符号的组合密码。
							</span>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
					<div class="main-itme hide">
							<div class="user-title">
								确认密码：
							</div>
							<div class="input-title">
								<input type="password" name="Cpwd" id="Cpwd" value="" class="input1" />
							<span class="tips">
								请再次输入登录密码。
							</span><br>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
					<!--/*额外的输入框*确密码密码/-->
				<div class="main-itme hide">
							<div class="user-title">
								激活码：
							</div>
							<div class="input-title">
								<input type="text" name="key" id="key" value="" class="input1" />
							<span class="tips">
								请输入您的激活码。
							</span><br>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
						<!--激活码-->
						<!--//邀请人手机-->
						<div class="main-itme hide">
							<div class="user-title">
								邀请人手机号码：
							</div>
							<div class="input-title">
								<input type="text" name="invite" id="invite" value="" class="input1" />
							<span class="tips">
								请输入邀请人账号绑定的手机号码。
							</span><br>
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
						<!--验证码-->
					<div class="main-itme " >
							<div class="user-title">
								验证码：
							</div>
							<div class="input-title input-titleyz">
								<input type="text" name="auth" id="auth" value="" class="input2" />
								<span class="logincode fl">
									<img src="img/loginCode1.jpg"/>
									<a href="javascript:;" class="logintoggle">换一张</a>
								</span>
								</br>
								
							<span class="message"></span>
							<!--/*错误提示*/-->
							</div>
						</div>
						<!--发送激活码-->
					<div class="main-itme"  >
						<a href="javascript:;" class="comfirm"></a>
					</div>
					<!--手机验证码重新发送-->
					<div class="main-itme hide" >
						<a href="javascript:;" class="consent"></a>
						<div class="postphone">
							<span id="notRecieve">手机未收到验证码，</span>
							<a class="rsendCode">重新发送</a>
						</div>
					</div>
					<div class="fl">
						<a href="" class="xiyi hide">《邦购用户协议》</a>
					</div>
					</form>
				</div>
				<div class="main-right">
					
				</div>
			</div>
		</div>
		<div id="footer-warp">
			<div class="footer w980">
				美特斯邦威集团网站：
				<a href="">美特斯邦威</a>|
				<a href="">ME&CITY</a>|
				<a href="">CH'IN祺</a>|
				<a href="">邦购网</a>
				
			</div>
		</div>
		<script>
            var arr=[];



			var userName=false;
			var userPhone=false;
			var codeyz=false;
			$("#user").blur(function(){
				var myreg=/^[a-zA-Z|\u4e00-\u9fa5]+[\u4e00-\u9fa5\w\d]+$/;
				if($(this).val()==""||$(this).val().length==0){
					$(this).nextAll(".message").text("用户名不能为空").css("color",'red');
					userName=false;
					return false;
				}
				else if($(this).val().length<4||$(this).val().length>20){
						$(this).nextAll(".message").text("用户名只能为4~20个字符,一个汉字为两个字符").css("color",'red');
						userName=false;
					return false;
				}
				else if(!myreg.test($(this).val())){
					
					$(this).nextAll(".message").text("以中、英文开头，与数字、下划线组成").css("color",'red');
					userName=false;
					return false;
				}else {
					$(this).nextAll(".message").text("用户名可用").css("color",'green');
					userName=true;
                    arr.push($('#user').val());
					return true;

				}
					
			})
//			/手机验证/
			$("#phoneCode").blur(function(){
				var pereg=/^1[3|4|5|7|8|9][0-9]+\d{4,8}$/;
				if($(this).val()==""||$(this).val().length==0){
					$(this).nextAll(".message").text("手机号码不能为空").css("color",'red');
					userPhone=false;
					return false;
				}else if($(this).val().length!=11){
						$(this).nextAll(".message").text("手机号码不合法！").css("color",'red');
						userPhone=false;
					return false;
				}else if(!pereg.test($(this).val())){
					$(this).nextAll(".message").text("手机号码不合法！").css("color",'red');
						userPhone=false;
					return false;
				}else{
					$(this).nextAll(".message").text("手机号码合法！").css("color",'green');
						userPhone=true;
                    arr.push($('#phoneCode').val());
					return true;

				}
			})
			//验证码更换
			var code=parseInt(Math.random()*6+1)
			var codeTitle={1:'y3bf',2:'rs4k',3:'sfk2',4:'9cb8',5:'47ub',6:'zpv2'};
			$('.logincode').children('img').attr('src','img/loginCode'+code+'.jpg')
			
			$('#auth').blur(function(){
			for(var key in codeTitle){
				if($(this).val().toLowerCase()!=codeTitle[code].toLowerCase()){
						$(this).nextAll(".message").text("验证码输入有误请刷新重新输入！").css("color",'red');
						codeyz=false;
						return false;
				}else if($(this).val().length==0||$(this).val()==''){
					$(this).nextAll(".message").text("请输入验证码！").css("color",'red');
						codeyz=false;
						return false;
				}else if($(this).val().toLowerCase()==codeTitle[code].toLowerCase()){
					$(this).nextAll(".message").text("验证码正确！").css("color",'green');
						codeyz=true;
						return true;
				}
				
			}
			
			})
			//换验证图片
			$('.logincode').children("a").click(function(){
				code=parseInt(Math.random()*6+1);
				$('.logincode').children('img').attr('src','img/loginCode'+code+'.jpg')
			})
			//发送激活码
			$('.comfirm').click(function(){
				if(userName==true&&userPhone==true&&codeyz==true){
					$(this).hide();
					$('.input-titleyz').parent().hide();
					$(".hide").show();
					$('#user').attr('disabled',true);
					$('#phoneCode').attr('disabled',true);
					$('.main-lefttitle')[0].innerHTML='第二步：填写获得的激活码';
					$('.success-name').text($("#user").val())
				}else{
					alert('请正确填写信息');
				}
			})
			//登陆密码
			var pwd=false;
			var pwdc=false;
			var invite=false;
			$('#pwd').blur(function(){
				var lrtrim=/^\s+|\s+$/g;
	     	if(lrtrim.test($(this).val())){
	   			$(this).nextAll(".message").text("密码前后不能有空格！").css("color",'red');
	   			pwd = false;
           		return false;
			}else if($(this).val().length < 6 || $(this).val().length > 16){
	        	
	        	$(this).nextAll(".message").text("密码长度只能为6~16！").css("color",'red');
	          	pwd = false;
	          	return false;
     		}else{
          		$(this).nextAll(".message").text("").css("color",'red');
          		pwd = true;
                arr.push($('#pwd').val());
	          	return true;

          	}
			});
			
//			console.log($('#Cpwd').val()==""	)
			//确认密码
			$('#Cpwd').blur(function(){
				if($(this).val() != "" && $(this).val().length != 0 
       			&& $(this).val() != $('#pwd').val()){
              
             	$(this).nextAll(".message").text("两次密码不相同！").css("color",'red');
             	$('#pwd').nextAll(".message").text("两次密码不相同！").css("color",'red');
               	pwd = false;
             	pwdc = false; 
            	
          }else if($(this).val() == "" ||$(this).val().length == 0){
          	$(this).nextAll(".message").text("确认密码不能为空！").css("color",'red');
          }else{
          		pwd = true;
          		pwdc = true; 
	          	
	          	$(this).nextAll(".message").text(" ").css("color",'red');
          	}
       			
			});
			//邀请人的手机
			$('#invite').blur(function(){
			
				var pereg=/^1[3|4|5|7|8|9][0-9]+\d{4,8}$/;
				if($(this).val()==""||$(this).val().length==0){
					$(this).nextAll(".message").text("手机号码不能为空").css("color",'red');
					invite=false;
					return false;
				}else if($(this).val().length!=11){
						$(this).nextAll(".message").text("手机号码不合法！").css("color",'red');
						invite=false;
					return false;
				}else if(!pereg.test($(this).val())){
					$(this).nextAll(".message").text("手机号码不合法！").css("color",'red');
						invite=false;
					return false;
				}else{
					$(this).nextAll(".message").text("手机号码合法！").css("color",'green');
						invite=true;
					return true;
					
				}
			})//
		//同意验证
		$('.consent').click(function(){
            console.log($("#user").val());
            console.log(arr)
            console.log( typeof arr[1])
            console.log( typeof arr[0])
            $.ajax(
                {
                    url:"http://localhost/reg/reg.php",
                    type:"post",
                    data: {"user":arr[0],"phoneCode":arr[1],"pwd":arr[2]},

                    success:function(result){
//                                                    console.log(result);
                        //                            console.log(JSON.parse(result)[0].status);
                        //                            if(JSON.parse(result)[0].status==1){
                        //                                console.log(result);
                        //                            {user:user,phone:phone,pwd:pwd}
                        //                            }
                    }
                }
            )
			if(pwd!=false&&pwdc!=false&&invite!=false){

				$('#register-form').hide();
				$('.main-lefttitle')[0].innerHTML='第二步：注册帐号成功';
				$('.success').show();
			}else{
				alert('请填写内容')
				$('#invite').blur();
				$('#Cpwd').blur();
				$('#pwd').blur();
			}
		})
		
         if($('#user').prop('disabled')==false){
         	$("body").keydown(function() {
             if (event.keyCode == "13") {//keyCode=13是回车键
                 $('.comfirm').click();
             }
         })}
         if($('#phoneCode').prop('disabled')=='disabled'){
         	console.log(1111)
         	 $("body").keypress(function() {
             if (event.keyCode == "13") {//keyCode=13是回车键
                 $('.consent').click();
             }
         });
         }



		</script>
	</body>
</html>
